<script setup lang="jsx">

import SingleUserDetailGameCard from "./SingleUserDetailGameCard.vue";
import {computed, defineEmits,defineModel} from "vue";
import BigDragon from "@share/components/common/icons/BigDragon.vue";
import SmallDragon from "@share/components/common/icons/SmallDragon.vue";
import Tower from "@share/components/common/icons/Tower.vue";
import Horde from "@share/components/common/icons/Horde.vue";
import DataIconHomePage from "@share/components/common/DataIcon-HomePage.vue";

const {
  participantInfos,
  currentPuuid,
  totalTeamInfos
} = defineProps([ 'participantInfos','totalTeamInfos', "currentPuuid"]);


const emit = defineEmits([
  'jumpSummonerHomePage',//跳转到其他玩家的主页
])
//最大对英雄的伤害
const maxInfo = computed(() => {
  let maxDamageDealtToChampions = 0;
  let maxDamageTaken = 0;
  participantInfos.forEach((teamGroup) => {
    teamGroup.forEach((participantInfo) => {
      maxDamageDealtToChampions = Math.max(maxDamageDealtToChampions, participantInfo?.data?.totalDamageDealtToChampions)
      maxDamageTaken = Math.max(maxDamageTaken, participantInfo?.data?.totalDamageTaken)
    })

  });
  return {
    //最大输出伤害
    "maxDamage": maxDamageDealtToChampions,
    //最大承受伤害
    "maxDamageTaken": maxDamageTaken
  };
})


const obtainClassFunc = ({isWin, puuid}) => {
  const isOwner = puuid === currentPuuid;
  if (isWin) {
    if (isOwner) {
      return "success_owner";
    } else {
      return "success"
    }

  } else {
    if (isOwner) {
      return "failed_owner"
    } else {
      return "failed"
    }
  }
}

const teamLeftTotalKill = computed(() => {
  return calcTotalFunc(participantInfos[0], (item) => {
    return item?.data?.kda?.k;
  })
})

const teamRightTotalKill = computed(() => {
  return calcTotalFunc(participantInfos[1], (item) => {
    return item?.data?.kda?.k;
  })
})


const teamLeftTotalGold = computed(() => {
  return calcTotalFunc(participantInfos[0], (item) => {
    return item?.data?.goldEarned || 0;
  })
})

const teamRightTotalGold = computed(() => {
  return calcTotalFunc(participantInfos[1], (item) => {
    return item?.data?.goldEarned || 0;
  })
})


const calcTotalFunc = (teamParticipants, valFunc) => {
  return (teamParticipants || []).map(item => {
    return valFunc(item);
  }).reduce((a, b) => a + b);
}


const top = computed(() => {
  return 3;
})
</script>

<template>
  <div class="game-record-detail-container">


    <div style="width: 100%;height: 40px;display: flex;justify-content: space-between">


      <div class="detail_team_info_container left_team">
        <div>
          <DataIconHomePage content="大龙"  :num="totalTeamInfos[0].baronKills">
            <BigDragon/>
          </DataIconHomePage>
        </div>
        <div>
          <DataIconHomePage content="小龙"  :num="totalTeamInfos[0].dragonKills">
            <SmallDragon/>
          </DataIconHomePage>

        </div>
        <div>
          <DataIconHomePage content="防御塔"  :num="totalTeamInfos[0].towerKills">
            <Tower/>
          </DataIconHomePage>
        </div>
        <div>
          <DataIconHomePage content="虚空巢虫"  :num="totalTeamInfos[0].hordeKills">
            <Horde/>
          </DataIconHomePage>
        </div>
      </div>

      <div
          style="min-width: 540px;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-between"
      >

        <div class="left_team_base">
          <div style="height: 100%;background-color: var(--var-game-data-blue)"
               :style="{
          'width':`${teamLeftTotalKill/(teamLeftTotalKill+teamRightTotalKill)*100}%`
        }"
          ></div>
          <span style="position: absolute;left: 12px">{{ teamLeftTotalKill }}</span>
          <span style="position: absolute;right: 12px">{{ teamRightTotalKill }}</span>
          <span style="position: absolute;right: calc(50% - 12px)">击杀</span>
        </div>


        <div class="left_team_base">
          <div style="height: 100%;background-color: var(--var-game-data-blue)"
               :style="{
          'width':`${teamLeftTotalGold/(teamLeftTotalGold+teamRightTotalGold)*100}%`
        }"
          ></div>
          <span style="position: absolute;left: 12px">{{ `${(teamLeftTotalGold / 1000).toFixed(1)}K` }}</span>
          <span style="position: absolute;right: 12px">{{ `${(teamRightTotalGold / 1000).toFixed(1)}K` }}</span>
          <span style="position: absolute;right: calc(50% - 12px)">金币</span>
        </div>

      </div>



      <div class="detail_team_info_container right_team">
        <div>
          <DataIconHomePage content="大龙"  :num="totalTeamInfos[1].baronKills">
            <BigDragon/>
          </DataIconHomePage>
        </div>
        <div>
          <DataIconHomePage content="小龙"  :num="totalTeamInfos[1].dragonKills">
            <SmallDragon/>
          </DataIconHomePage>

        </div>
        <div>
          <DataIconHomePage content="防御塔"  :num="totalTeamInfos[1].towerKills">
            <Tower/>
          </DataIconHomePage>
        </div>
        <div>
          <DataIconHomePage content="虚空巢虫"  :num="totalTeamInfos[1].hordeKills">
            <Horde/>
          </DataIconHomePage>
        </div>
      </div>


    </div>



    <div style="display: flex">

      <div style="width: 50%;" v-for="(oneTeam,teamIndex) in participantInfos">

            <SingleUserDetailGameCard
                @jumpSummonerHomePage="args => {emit('jumpSummonerHomePage',args);}"
                v-for="item in oneTeam"
                :class="obtainClassFunc({
              puuid:item?.player?.puuid,
              isWin:item?.teamInfo?.win==='Win'
              })"
                :maxInfo="maxInfo"
                :participantInfo="item"
                :direction="teamIndex===0?'right':'left'"/>


      </div>

    </div>

  </div>
</template>

<style scoped lang="scss">
.game-record-detail-container {
  width: 100%;
  display: flex;
  flex-direction: column;

  .item-image-wrapper {
    & > span {
      margin: 0 3px
    }
  }
}

.success {
  background-color: var(--var-success-background-color);
}

.success_owner {
  background-color: var(--var-success-owner-background-color);
}

.failed {
  background-color: var(--var-failed-background-color);
}

.failed_owner {
  background-color: var(--var-failed-owner-background-color);
}

.left_team_base {
  width: 100%;
  height: calc(50% - 4px);
  background-color: var(--var-game-data-red);
  position: relative;
  line-height: 1;
  font-size: 0.9rem;
  color: #FFFFFF;

  & > span {
    top: 0;
  }
}

.detail_team_info_container{
  display: flex;
  align-items: center;
  &>div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width:24px;
    margin:0 3px;
  }
}

.left_team{
  color:var(--var-game-data-blue);
}
.right_team{
  color: var(--var-game-data-red);
}
</style>